function Base64Img() {

}

Base64Img.prototype = {
    canvas_img2base64: function (canvas_id, verbose = false) {
        var canvas = document.getElementById(canvas_id);
        var ctx = canvas.getContext("2d");
        var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
        var dataURL = canvas.toDataURL("image/" + ext);
        if (verbose) {
            console.log(dataURL);
        }
        // it will contain HEADER: data:image/png;base64, use for htlml direct load
        return dataURL;
    },
    load_json: function (url_file) {
        $.ajaxSettings.async = false;
        $.getJSON(document.location.origin + url_file, function (result) {
            payload_str = result;
        });
        $.ajaxSettings.async = true;

        return payload_str;
    },
    base642img_html: function (target_document_id, base64_str) {
        document.getElementById(target_document_id).setAttribute('src', 'data:image/png;' +
            'base64,' + base64_str);
    },
    canvas_draw_base64: function (canvas_id, base64_str,
                                  topleftX = 0, topleftY = 0, width = 0, height = 0) {
        var img = new Image();
        img.src = "data:image/png;base64," + base64_str;
        var canvas = document.getElementById(canvas_id);
        var ctx = canvas.getContext("2d");
        img.onload = function () {
            if (width == 0 || height == 0) {
                ctx.drawImage(img, topleftX, topleftY);
            } else {
                ctx.drawImage(img, topleftX, topleftY, width, height);
            }
        };
    },
    canvas_draw_base64_with_header: function (canvas_id, base64_str,
                                  topleftX = 0, topleftY = 0, width = 0, height = 0) {
        var img = new Image();
        img.src = base64_str;
        var canvas = document.getElementById(canvas_id);
        var ctx = canvas.getContext("2d");
        img.onload = function () {
            if (width == 0 || height == 0) {
                ctx.drawImage(img, topleftX, topleftY);
            } else {
                ctx.drawImage(img, topleftX, topleftY, width, height);
            }
        };
    },
    canvas_clear: function (canvas_id,
                            topleftX = 0, topleftY = 0, width = 0, height = 0) {
        var cxt = document.getElementById(canvas_id).getContext("2d");
        cxt.clearRect(topleftX, topleftY, width, height);
    },
    case1: function () {
        var payload_str = this.load_json("/static/trace_response.json");
        payload_str = payload_str['trace_synthesis_img'];
        this.base642img_html('img', payload_str);
        this.canvas_img2base64("canvas", verbose = true);
    },
    case2: function () {
        var payload_str = this.load_json("/static/trace_response.json");
        payload_str = payload_str['trace_synthesis_img'];
        this.canvas_draw_base64("canvas", payload_str);
    },
};


// window.onload = function () {
//     g_base64_im = new Base64Img();
//     g_base64_im.case2();
//
// };




